/**
 * Created by saky on 2017/12/13.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
} from 'react-native';
import {LoadingView} from "./LoadingView";
import {ErrorView} from "./ErrorView";
import {EmptyView} from "./EmptyView";
import {PageStatus} from "../Constants"


export default class BaseView extends Component {

    constructor(props) {
        console.log(props)
        super(props);
    }

    _onEmptyPress = () => {
        this.props.onEmptyPress();
    };

    _onErrorPress = () => {
        this.props.onErrorPress();
    };

    render() {
        // 第一次加载等待的view
        if (this.props.status === PageStatus.LOADING) {
            return this.renderLoadingView();
        } else if (this.props.status === PageStatus.EMPTY) {
            //请求为空的view
            return this.renderEmptyView();
        } else if (this.props.status === PageStatus.ERROR || this.props.status === PageStatus.NETWORK_ERROR) {
            //请求失败view
            return this.renderErrorView();
        }
        //加载数据
        return this.renderData();
    }


    //加载等待的view
    renderLoadingView() {
        return (
            <LoadingView />
        );
    }

    //加载失败view
    renderErrorView() {
        return (
            <ErrorView
                title={this.props.status === PageStatus.NETWORK_ERROR?"对不起，网络去火星了":this.props.errorText}
                imgSource={this.props.status === PageStatus.NETWORK_ERROR?
                    require("../../../app/resource/images/img_net_error.png"):require("../../../app/resource/images/img_system_error.png")}
                btnText={"轻点刷新"}
                textStyle={this.props.errorTextStyle}
                buttonStyle={this.props.errorButtonStyle}
                backgroundColor={this.props.errorBgColor}
                onPress={() => {
                    this._onErrorPress();
                }}/>
        );
    }

    //加载失败view
    renderEmptyView() {
        return (
            <EmptyView
                title={this.props.emptyText}
                imgSource={this.props.emptyImgSource}
                btnText={this.props.emptyBtnText}
                textStyle={this.props.emptyTextStyle}
                buttonStyle={this.props.emptyButtonStyle}
                backgroundColor={this.props.emptyBgColor}
                onPress={() => {
                    this._onEmptyPress();
                }}/>
        );
    }


    renderData() {
        return (
            <View style={{flex: 1}}>
                {this.props.children}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    position_container: {
        flex: 1,
        backgroundColor: '#F5F6F7',
        flexDirection: 'column',
    },

    just_loading_container: {
        width: window.width,
        height: window.height - 40,
        backgroundColor: "transparent",
        position: 'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        top: 0,
        left: 0,
    },

});